@import "../css/variables";

.tooltip {
  font-size: $font-size-mini;
  color: $gray-700;
  background-color: $gray-100;
  border-radius: $border-radius-tiny;
  padding: 0 0.4rem;
  box-shadow: 0 0 5px rgba(0 0 0 / 30%);
  display: none;
  white-space: nowrap;
  user-select: none;

  &.visible {
    display: block;
  }

  .tooltip-arrow, .tooltip-arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    z-index: -1;
  }

  .tooltip-arrow::before {
    content: "";
    transform: rotate(45deg);
    background: $gray-100;
    box-shadow: -2px -2px 2px rgba(0 0 0 / 10%);
  }

  &[data-popper-placement^="top"] > .tooltip-arrow {
    bottom: -4px;

    &::before {
      transform: rotate(225deg);
    }
  }

  &[data-popper-placement^="bottom"] > .tooltip-arrow {
    top: -4px;
  }

  &[data-popper-placement^="left"] > .tooltip-arrow {
    right: -4px;

    &::before {
      transform: rotate(135deg);
    }
  }

  &[data-popper-placement^="right"] > .tooltip-arrow {
    left: -4px;

    &::before {
      transform: rotate(315deg);
    }
  }
}
